<template>
  <div v-loading.fullscreen.lock="loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input size="mini" placeholder="频道名称" v-model="getListData.channelInfo"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select v-model="getListData.channelIsstart" size="mini" clearable placeholder="状态">
              <el-option
                v-for="item in searhFormData.stateOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-button-group>
              <el-button size="mini"  @click="search">查询</el-button>
              <el-button size="mini"  @click="showAdd" type="primary">新增</el-button>
            </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="list">
          <el-table stripe :data="dataSource" >
            <el-table-column prop="channelId" label="ID" ></el-table-column>
            <el-table-column prop="channelInfo" label="频道名称" ></el-table-column>
            <el-table-column prop="channelCustominfo1" label="频道介绍" ></el-table-column>
            <el-table-column prop="channelIsstartInfo" label="状态"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
              <el-button-group>
                <el-button  type="default" icon="el-icon-edit" @click="showUpdate(scope.row)" size="mini">编辑</el-button>
                <el-button  type="default" icon="el-icon-delete"  @click="updateStatus(scope.row,1)" size="mini" v-if="scope.row.channelIsstart==0">禁用</el-button>
                <el-button  type="default" icon="el-icon-delete"  @click="updateStatus(scope.row,0)" size="mini" v-if="scope.row.channelIsstart==1">启用</el-button>
              </el-button-group>
              </template>
            </el-table-column>
          </el-table>
    </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationData.currentPage"
        :background="true"
        :page-sizes="paginationData.pageSizes"
        :page-size="paginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total">
      </el-pagination>
    <!--添加频道-->
    <el-dialog title="添加频道"
    :visible.sync="dialog.addBox"
    @close="closeAddForm('addRules')"
    width="400px"
    :close-on-click-modal="false">
      <el-form :model="addFrom" :rules="rules" status-icon ref="addRules">
        <el-form-item label="频道名称" label-width="80px" prop="channelInfo">
          <el-input size="mini" v-model="addFrom.channelInfo"></el-input>
        </el-form-item>
        <el-form-item label="频道介绍" label-width="80px" >
          <el-input size="mini"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            v-model="addFrom.channelCustominfo1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAdd()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="add('addRules')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改频道-->
    <el-dialog title="修改频道"
    :visible.sync="dialog.updateBox"
    @close="closeUpdateForm('updateFrom')"
    width="400px"
    :close-on-click-modal="false">
      <el-form :model="updateFrom" :rules="rules" status-icon ref="updateFrom">
        <el-form-item label="频道名称" label-width="80px" prop="channelInfo">
          <el-input size="mini" v-model="updateFrom.channelInfo"></el-input>
        </el-form-item>
        <el-form-item label="频道介绍" label-width="80px">
          <el-input size="mini"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
           v-model="updateFrom.channelCustominfo1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleUpdate()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="update('updateFrom')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bookChannelController from '@/api/bookChannelController/index'
  export default {
    name:'channel',
    data(){
      return {
        loading:false,
        searhFormData:{
          stateOptions:[
            {id:0,text:'启用'},
            {id:1,text:'禁用'}
          ]
        },
        getListData:{
          channelIsstart:null,
          channelInfo:null,
          pageSize:10,
          pageNum:1
        },
        paginationData:{
          currentPage:1,
          pageSizes:[10,20,30],
          pageSize:10,
          total:0
        },
        dataSource:null,
        addFrom:{
          channelInfo:null,
          channelCustominfo1:null,
          channelIsstart:0,
        },
        rules:{
          channelInfo:[
            {required:true,message:'请输入频道名称',trigger:'blur'}
          ]
        },
        updateFrom:{
          channelInfo:null,
          channelId:null,
          channelIsstart:null,
          channelCustominfo1:null
        },
        dialog:{
          addBox:false,
          updateBox:false
        }
      }
    },
    created(){
      this.getList();
    },
    methods:{
      search(){
        this.paginationData.currentPage=1;
        this.getListData.pageNum=1;
        this.getList();
      },
      getList(){
        let formData=this.getListData;
        this.loading=true;
        bookChannelController.getList(formData).then(response=>{

          this.dataSource=response.data.list;
          this.paginationData.total = response.data.total;
          this.loading=false;
        }).catch(()=>{
          this.loading=false;
        })
      },
      showAdd(){
        this.clearAddFrom();
        this.dialog.addBox = true;
      },
      cancleAdd(){
        this.dialog.addBox = false;
      },
      clearAddFrom(){
        this.addFrom = {
          channelInfo:null,
          channelCustominfo1:null,
          channelIsstart:0,
        }
      },
      add(addRules){
        this.$refs[addRules].validate((valid) => {
          if(valid){
            this.loading = true;
            let formData=this.addFrom;
              bookChannelController.add(formData).then(response=>{
                if(response.success){
                  this.getList();
                  this.$message({
                    type:'success',
                    message:response.msg
                  })
                }
              this.loading=false;
              this.dialog.addBox = false;
            }).catch(error=>{
              this.loading=false;
            })
          }
        })
      },
      showUpdate(data){
        this.dialog.updateBox = true;
        this.updateFrom = {
          channelId:data.channelId,
          channelInfo:data.channelInfo,
          channelIsstart:data.channelIsstart,
          channelCustominfo1:data.channelCustominfo1
        }
      },
      closeAddForm(addRules){
        this.clearAddFrom();
        this.$refs[addRules].resetFields();
      },
      closeUpdateForm(updateRules){
         this.$refs[updateRules].resetFields();
      },
      cancleUpdate(){
        this.dialog.updateBox = false;
      },
      update(updateRules){
        this.$refs[updateRules].validate((valid) => {
          if(valid){
            this.loading = true;
            let formData = this.updateFrom;
            bookChannelController.update(formData).then(response=>{
              this.loading = false;
              if(response.success){
                this.dialog.updateBox = false;
                this.getList();
                this.$message({
                  type:'success',
                  message:response.msg
                })
              }
            }).catch(()=>{
              this.loading = false;
            })
          }
        })
      },
      updateStatus(data,state){
        let fromData = {
          channelId:data.channelId,
          channelIsstart:state
        }
        let msg = state==0?'此操作会启用该频道，是否继续？':'此操作会禁用该频道，是否继续？';
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bookChannelController.updateStatus(fromData).then(response=>{
            if(response.success){
              this.getList();
              this.$message({
                type: 'success',
                message: response.msg
              });
            }
          })
        })
      },
      handleSizeChange(val) { // 修改每页显示条数 需要发送请求
        this.paginationData.pageSize=val;
        this.getListData.pageSize=val;
        this.getList();//重新获取当前页数据
      },
      handleCurrentChange(val) { // 修改当前页 需要发送请求
        this.paginationData.currentPage=val;
        this.getListData.pageNum=val;
        this.getList();//重新获取当前页数据
      }
    }
  }
</script>

<style scoped>
.header{
  margin-top: 20px;
}
.list{
  margin-top: 20px;
}
</style>
